<template>
  <ex-dialog
    width="800px"
    class="ex-diolog"
    title="新购卡得FB活动"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
			<!-- <el-form-item label="子账号编号" prop="pass">
				<div class="textData">000000000000</div>
			</el-form-item> -->
			<el-form-item label="参与活动的店铺：" prop="shopId">
				<el-select v-if="pathType == 'add'" v-model="ruleForm.shopId" @change="changeShopId" placeholder="请选择" autocomplete="off">
					<el-option
						v-for="item in adminShopList"
						:key="item.id"
						:label="item.name"
						:value="item.id">
					</el-option>
				</el-select>
        <span v-if="pathType == 'edit'">{{shopName}}</span>
			</el-form-item>
      <el-form-item label="参与活动预付卡：" prop="assetCardId">
				<el-select  v-if="pathType == 'add'" v-model="ruleForm.assetCardId" @change="changeAssetCardId" placeholder="请选择" autocomplete="off">
					<el-option
						v-for="item in cardInfoList"
						:key="item.id"
						:label="item.name"
						:value="item.id">
					</el-option>
				</el-select>
        <span v-if="pathType == 'edit'">{{cardName}}</span>
			</el-form-item>
      <el-form-item label="预付卡权益：">
				<div v-if="pathType == 'add'">{{interests}}</div>
        <div v-if="pathType == 'edit'">{{basePower}}</div>
			</el-form-item>
      
			<el-form-item label="活动内容：" prop="activityType">
        <el-radio-group v-model="ruleForm.activityType" class="radioType">
          <el-radio :label="1">10亿补贴活动-充多少送多少FB</el-radio>
          <el-radio :label="2">
              <div>指定赠送<el-input :disabled="ruleForm.activityType == 1" v-model="ruleForm.giveAmount" placeholder="请输入内容"></el-input>FB <span style="margin-left: 100px">注：用户使用完卡金额才解冻FB</span></div>
              <div></div>
          </el-radio>
        </el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')" v-if="pathType == 'add'">确认</el-button>
        <el-button type="primary" @click="editForm('ruleForm')" v-if="pathType == 'edit'">修改</el-button>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  adminShopSelectList,
  cardInfoList,
  addPlatform,
  platformDetail,
  editPlatform
} from '@/api/operateActive'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'));
      } else {
        // var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; 
        // if (reg.test(value) === false) {
        //   callback(new Error('请输入正确的手机号码'));
        // }
        if(value.length != 11){
          callback(new Error('请输入正确的手机号码'));
        }
        callback();
      }
    };
    return {
      
			adminShopList: [],
      cardInfoList: [],
      merchantId: '',
      interests: '',
      cardName: '',
      shopName: '',
      basePower: '',
			ruleForm: {
				shopId: '',//活动店铺id
				assetCardId: '',//活动预付卡id
				assetCardName: '',//活动预付卡名称
        content: '',//活动内容
        activityType: '',//活动类型（1 购卡金额赠送 2 指定赠送）
        giveAmount: '',//赠送数量
			},
			rules: {
          shopId: [
            { required: true,message: '请选择店铺', trigger: 'change' }
          ],
          assetCardId: [
            { required: true,message: '请选择预付卡', trigger: 'change' }
          ],
          activityType: [
            { required: true,message: '请选择活动', trigger: 'change' }
          ]
        }
    }
  },
  computed: {
   
  },
  created() {
    this.getAdminShop()
    if(this.pathType == 'edit'){
      this.getDetail()
    }
	},
  methods: {
    usedInPar(str){
      console.log(str);

    },
    //获取角色
		getAdminShop(){
      var data = {
        pageSize: 1000,
        merchantId: this.merchantId
      }
			adminShopSelectList(data).then(res => {
        const {result} = res
        console.log('adminShopList',result)
        this.adminShopList = result.records
      }).finally(() => {
        this.loading = false
      })
		},
    //获取预付卡
    getCard(){
      var data = {
        pageSize: 1000,
        merchantId: this.merchantId
      }
			cardInfoList(data).then(res => {
        const {result} = res
        console.log('cardInfoList',result)
        this.cardInfoList = result.records
      }).finally(() => {
        this.loading = false
      })
    },
    //详情
    getDetail(){
			platformDetail(this.id).then(res => {
        const {result} = res
        console.log('platformDetail',result)
        this.ruleForm.shopId = result.shopId
        this.ruleForm.assetCardId = result.assetCardId
        this.cardName = result.cardName
        this.shopName = result.shopName
        this.basePower = result.basePower
        this.ruleForm.activityType = parseInt(result.activityType)
        this.ruleForm.giveAmount = result.giveAmount == 0 ? '' : result.giveAmount
      }).finally(() => {
        this.loading = false
      })
    },
    // 选择店铺
    changeShopId(event){
      this.ruleForm.shopId = event
      this.adminShopList.forEach(item =>{
        if(item.id == event){
          this.merchantId = item.merchantId
        }
      })
      this.cardInfoList = []
      this.ruleForm.assetCardId = ''//活动预付卡id
			this.ruleForm.assetCardName =''//活动预付卡名称
      this.ruleForm.content =''//活动内容
      this.getCard()
      console.log('event',event)
    },
    //选择卡
    changeAssetCardId(event){
      this.ruleForm.assetCardId = event
      this.cardInfoList.forEach(item =>{
        if(item.id == event){
          var basePower = item.basePower
          this.ruleForm.assetCardName = item.name
          if(basePower){
            this.interests =basePower
          }else{
            this.interests = '空'
          }
          
            
        }
      })
      console.log('event',event)
    },
   
    //新建子账号
    submitForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
          if(this.ruleForm.activityType == 1){
            this.ruleForm.content = '10亿补贴活动-充多少送多少FB'

          } else{
            this.ruleForm.content = '指定赠送'+ this.ruleForm.giveAmount+'FB'
          }
          var data = {
            ...this.ruleForm
          }
          addPlatform(data).then(res => {
            this.handleSuccess("创建成功")
          }).finally(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //修改
    editForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
          if(this.ruleForm.activityType == 1){
            this.ruleForm.content = '10亿补贴活动-充多少送多少FB'
            this.ruleForm.giveAmount = ''

          } else{
            this.ruleForm.content = '指定赠送'+ this.ruleForm.giveAmount+'FB'
          }
          var data = {
            id: this.id,
            content: this.ruleForm.content,
            activityType: this.ruleForm.activityType,
            giveAmount: this.ruleForm.giveAmount,
          }
          editPlatform(data).then(res => {
            this.handleSuccess("修改成功")
          }).finally(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}
.radioType{
  display: flex;
  flex-direction: column;
  .el-radio{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 14px;
  }
  .el-radio__label{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .el-input{
    width: 150px;
    margin: 0 10px;
  }
}
</style>
